<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Keywords" content="" />
    <meta name="description" content="" />
    <title>tmall</title>
    <link href="css/base.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <link href="https://at.alicdn.com/t/font_1118271_o0uov8gino.css" rel="stylesheet">
    <script src="simple.js"></script>
  </head>
<body>

  <header class="header-container">
    <div class="navbar">
      <div class="navbar-left">
        <i class="iconfont icon-scan"></i>
      </div>
      <div class="navbar-center">
        <div class="searchBox">
          <div class="searchBox-prepend">
            <i class="iconfont icon-search"></i>
          </div>
          <input type="text" class="searchBox-input" placeholder="开学季有礼，好货5折起">
          <div class="searchBox-append">
            <i class="iconfont icon-close"></i>
          </div>
        </div>
      </div>
      <div class="navbar-right">
        <i class="iconfont icon-msg"></i>
      </div>
    </div>
  </header>

  <main class="main-container">
    <section class="slider-container">
      <img src="img/slider/1.jpeg" alt="slider">
    </section>

    <nav class="nav-container">
      <ul class="nav">
        <li class="nav-item">
          <a href="javascript: void(0);" class="nav-link">
            <img src="img/nav/1.webp" alt="nav" class="nav-img">
            <span class="nav-text">苏宁易购</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="javascript: void(0);" class="nav-link">
            <img src="img/nav/2.png" alt="nav" class="nav-img">
            <span class="nav-text">天猫超市</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="javascript: void(0);" class="nav-link">
            <img src="img/nav/3.webp" alt="nav" class="nav-img">
            <span class="nav-text">天猫国际</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="javascript: void(0);" class="nav-link">
            <img src="img/nav/4.webp" alt="nav" class="nav-img">
            <span class="nav-text">聚划算</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="javascript: void(0);" class="nav-link">
            <img src="img/nav/5.webp" alt="nav" class="nav-img">
            <span class="nav-text">分类</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="javascript: void(0);" class="nav-link">
            <img src="img/nav/5.webp" alt="nav" class="nav-img">
            <span class="nav-text">分类</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="javascript: void(0);" class="nav-link">
            <img src="img/nav/4.webp" alt="nav" class="nav-img">
            <span class="nav-text">聚划算</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="javascript: void(0);" class="nav-link">
            <img src="img/nav/3.webp" alt="nav" class="nav-img">
            <span class="nav-text">天猫国际</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="javascript: void(0);" class="nav-link">
            <img src="img/nav/2.png" alt="nav" class="nav-img">
            <span class="nav-text">天猫超市</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="javascript: void(0);" class="nav-link">
            <img src="img/nav/1.webp" alt="nav" class="nav-img">
            <span class="nav-text">苏宁易购</span>
          </a>
        </li>
      </ul>
    </nav>

    <section class="recommend-container">
      <ul class="recommend">
        <li class="recommend-item">
          <a href="javascript: void(0);" class="recommend-link">
            <p class="recommend-pic">
              <img src="img/recommend/1.webp" alt="recommend" class="recommend-img">
              <span class="recommend-shadow"></span>
            </p>
            <p class="recommend-name">秋装新款韩版大码宽松显瘦卡通印花长袖t恤女学生打底衫春上衣服</p>
            <p class="recommend-origPrice"><del>¥300.00</del></p>
            <p class="recommend-info">
              <span class="recommend-price">¥<strong class="recommend-price-num">18.8</strong></span>
              <span class="recommend-count">998件已售</span>
            </p>
          </a>
        </li>
        <li class="recommend-item">
          <a href="javascript: void(0);" class="recommend-link">
            <p class="recommend-pic">
              <img src="img/recommend/2.webp" alt="recommend" class="recommend-img">
              <span class="recommend-shadow"></span>
            </p>
            <p class="recommend-name">新疆野生昆仑雪菊特级胎菊王昆山血菊冰山茶叶天山野菊花茶正品</p>
            <p class="recommend-origPrice"><del>¥300.00</del></p>
            <p class="recommend-info">
              <span class="recommend-price">¥<strong class="recommend-price-num">20.8</strong></span>
              <span class="recommend-count">528件已售</span>
            </p>
          </a>
        </li>
        <li class="recommend-item">
          <a href="javascript: void(0);" class="recommend-link">
            <p class="recommend-pic">
              <img src="img/recommend/3.webp" alt="recommend" class="recommend-img">
              <span class="recommend-shadow"></span>
            </p>
            <p class="recommend-name">TRW天合 前划线刹车盘 DF4464XSS适用于大众新帕萨特/迈腾/途观</p>
            <p class="recommend-origPrice"><del>¥2100.00</del></p>
            <p class="recommend-info">
              <span class="recommend-price">¥<strong class="recommend-price-num">168</strong></span>
              <span class="recommend-count">125件已售</span>
            </p>
          </a>
        </li>
        <li class="recommend-item">
          <a href="javascript: void(0);" class="recommend-link">
            <p class="recommend-pic">
              <img src="img/recommend/4.webp" alt="recommend" class="recommend-img">
              <span class="recommend-shadow"></span>
            </p>
            <p class="recommend-name">小强充电式圆锯5881电动工具20V锂电圆盘锯电锯木工手提切割机165</p>
            <p class="recommend-origPrice"><del>¥678.00</del></p>
            <p class="recommend-info">
              <span class="recommend-price">¥<strong class="recommend-price-num">388.5</strong></span>
              <span class="recommend-count">246件已售</span>
            </p>
          </a>
        </li>
        <li class="recommend-item">
          <a href="javascript: void(0);" class="recommend-link">
            <p class="recommend-pic">
              <img src="img/recommend/5.webp" alt="recommend" class="recommend-img">
              <span class="recommend-shadow"></span>
            </p>
            <p class="recommend-name">女童旗袍夏季民族风连衣裙儿童旗袍公主裙中国风童装改良复古短款</p>
            <p class="recommend-origPrice"><del>¥216.00</del></p>
            <p class="recommend-info">
              <span class="recommend-price">¥<strong class="recommend-price-num">108</strong></span>
              <span class="recommend-count">98件已售</span>
            </p>
          </a>
        </li>
        <li class="recommend-item">
          <a href="javascript: void(0);" class="recommend-link">
            <p class="recommend-pic">
              <img src="img/recommend/6.webp" alt="recommend" class="recommend-img">
              <span class="recommend-shadow"></span>
            </p>
            <p class="recommend-name">2019新款无框切边豹子头镶钻渐变太阳镜女墨镜眼镜</p>
            <p class="recommend-origPrice"><del>118.00</del></p>
            <p class="recommend-info">
              <span class="recommend-price">¥<strong class="recommend-price-num">108</strong></span>
              <span class="recommend-count">32件已售</span>
            </p>
          </a>
        </li>
      </ul>
    </section>
  </main>

  <footer class="tabbar-container">
    <ul class="tabbar">
      <li class="tabbar-item tabbar-item-active">
        <a href="javascript: void(0);" class="tabbar-link">
          <i class="iconfont icon-home"></i>
          <span>首页</span>
        </a>
      </li>
      <li class="tabbar-item">
        <a href="javascript: void(0);" class="tabbar-link">
          <i class="iconfont icon-category"></i>
          <span>分类页</span>
        </a>
      </li>
      <li class="tabbar-item">
        <a href="javascript: void(0);" class="tabbar-link">
          <i class="iconfont icon-shop"></i>
          <span>购物车</span>
        </a>
      </li>
      <li class="tabbar-item">
        <a href="javascript: void(0);" class="tabbar-link">
          <i class="iconfont icon-personal"></i>
          <span>个人中心</span>
        </a>
      </li>
    </ul>
  </footer>

<script></script>
</body>
</html>
